<template>
    <div>
      <van-nav-bar title="标签3"/>
      <van-rate
        v-model="value"
        icon="like"
        void-icon="like-o"
        fixed=true
      />
      <div id="list-div">
        <van-pull-refresh v-model="isRefresh" @refresh="onRefresh">
          <van-list v-model="loading" :finished="finished" @load="onLoad" finished-text="没有更多了">
            <p>下拉刷新次数: {{ count }}</p>
            <p :key="index" v-for="(item,index) in items">上拉刷新次数: {{ item }}</p>
          </van-list>
        </van-pull-refresh>
      </div>
    </div>
</template>

<script>
export default {
  data() {
    return {
      value: 3.4,
      count: 0,
      pullcount: 0,
      isLoading: false,
      loading:false,
      finished:false, //是否已加载完所有数据
      page:1,        //商品列表的页数
      isRefresh:false,///是否处于下拉刷新状态
      items:[1,2,3,4,5,6,7,8,9,10]
    }
  },
  mounted () {
    let winHeight = document.documentElement.clientHeight
    document.getElementById("list-div").style.height=winHeight -106 +'px'
  },
  methods: {
    onRefresh(){
      console.log(1)
      setTimeout(()=>{
        this.isRefresh=false;
        this.goodList=[]
        this.count += 1
      },500)
    },
    onLoad(){
      let that = this
      that.loading = true
      setTimeout(()=>{
        that.pull()
      },1000)
    },
    pull () {
      let that = this
      this.page += 1
      this.pullcount = this.page
      if (this.page> 4) {
        console.log(2)
        that.loading = false
        that.finished = true
        console.log('不在加载')
      } else {
        console.log(1)
        that.items.push(this.page)
        that.items.push(this.page)
        that.items.push(this.page)
        that.items.push(this.page)
        that.items.push(this.page)
        that.items.push(this.page)
        that.items.push(this.page)
        that.items.push(this.page)
        that.items.push(this.page)
        that.items.push(this.page)
        that.loading = false
        // console.log(this.page, 888)
      }
    }
  }
}
</script>

<style scoped>
#list-div{
  overflow: scroll;
}
</style>